<template>
    <!-- 修改资料 -->
    <div>
        <!-- 内容主题区域 -->
        <el-form label-width="100px" :model="form" label-position="right" ref="formRef" :rules="formRules" class="borderNone" disabled>
            <el-card>
            <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="申请日期" prop="applyDate">
                        <el-input v-model="form.applyDate" />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="申请人">
                        <el-input v-model="form.employeeName"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="部门名称">
                        <el-input v-model="form.deptName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="部门主管姓名" prop="leader">
                        <el-input v-model="form.leader" disabled></el-input>
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="受款人" prop="receiver">
                        <el-input v-model="form.receiver"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="申请金额" prop="applyAmount">
                        <el-input v-model="form.applyAmount" :min="0"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="预计归还日期" prop="expectedReturnDate">
                        <el-input v-model="form.expectedReturnDate"/>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="科目" >
                        <el-input v-model="form.subjectsName"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-form-item prop="remark" label="申请事由">
                <el-input v-model="form.remark" type="textarea"></el-input>
            </el-form-item>
        </el-card>
        </el-form>
        <el-card v-if="!noButton&&form.processInstanceId">
            <tsTimeLine v-if="form.processInstanceId" :processInstanceId="form.processInstanceId" :businessKey="form.id" 
                :flow-id="form.flowId"  ref="flowNodeFormatRef"></tsTimeLine>
        </el-card>
        <div v-if="!noButton" class="button-position" style="margin-top: 5px;">
            <el-button @click="updateVisible">取 消</el-button>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import { ElNotification } from 'element-plus';
import { Check, Close } from '@element-plus/icons-vue';
import Api from '@/api/model/trip.js'
import tsTimeLine from '@/components/tsTimeLine/index.vue'
const emit = defineEmits(['updatetable'])
// 添加用户数据的对象
const props = defineProps({
    paramsData: {
        type: Object,
        defalut: {}
    },
    noButton: { type: Boolean, defalut: false }
})
const form = ref({
});
const formRef = ref()
onMounted(() => {
    getInit()
})

const getInit = async () => {
    let formRes = await Api.applyCost.detail.post(props.paramsData)
    if (formRes.code == 200) {
        form.value = formRes.data
    }
}
const updateVisible = (val) => {
    emit('updatetable')
}
</script>

<style lang="less" scoped>
.borderNone {
    :deep(.el-input__wrapper) {
        box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
        cursor: default;
        background-color: transparent; //背景颜色透明
        border-bottom: 1px solid #999;
        border-radius: 0;

        .el-input__inner {
            cursor: default !important;
        }
    }
    :deep(.el-textarea__inner) {
            box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
            cursor: default;
            background-color: transparent; //背景颜色透明
            border-bottom: 1px solid #999;
            border-radius: 0;
        }
}
</style>

